<template>
    <div>
      <Card style="width:250px">
        <div style="text-align:left">
            <h2>当前号序：{{nowlineno}}</h2>
        </div>
      </Card>
      <Tabs type="card" :animated="false" name="tab1"  @on-click="tabChange" v-model="tabIndex" style="margin-top:10px">
        <TabPane label="咨询业务" name="zx" tab="tab1">
          <div style="margin-left: 10px;margin-bottom: 10px">
            <Button type="success" @click="jiaohao('zx')">咨询业务叫号</Button>
            <Button type="success" @click="zanting('zx')" style="margin-left:5px">办理完成并暂停</Button>
          </div>
          <Table border :columns="columns1" :data="datalist">
            <template slot-scope="{ row, index }" slot="state">
            <span v-if="row.state == '0'">
             <span>排队中</span>
            </span>
              <span v-if="row.state == '1'">
             <span>办理中</span>
            </span>
              <span v-if="row.state == '2'">
             <span>办理完成</span>
            </span>
              <span v-if="row.state == '3'">
             <span>已超时作废</span>
            </span>
              <span v-if="row.state == '4'">
             <span>已取消</span>
            </span>
            <span v-if="row.state == '5'">
             <span>已弃号</span>
            </span>
            </template>
            <template slot-scope="{ row, index }" slot="caozuo">
              <Button type="success" v-if="row.state == '0'" style="margin-left:5px" @click="xuanhu(row)">选呼</Button>
              <Button type="error" style="margin-left:5px" v-if="row.state == '0'" @click="qihao(row)">弃号</Button>
              <Button type="success" style="margin-left:5px" v-if="row.state == '1'" @click="hanhao(row)">播报</Button>
            </template>
          </Table>
        </TabPane>
        <TabPane label="办理业务" name="bl" tab="tab1">
          <div style="margin-left: 10px;margin-bottom: 10px">
            <Button type="success" @click="jiaohao('bl')">办理业务叫号</Button>
            <Button type="success" @click="zanting('bl')" style="margin-left:5px">办理完成并暂停</Button>
          </div>
          <Table border :columns="columns1" :data="datalist">
            <template slot-scope="{ row, index }" slot="state">
            <span v-if="row.state == '0'">
             <span>排队中</span>
            </span>
              <span v-if="row.state == '1'">
             <span>办理中</span>
            </span>
              <span v-if="row.state == '2'">
             <span>办理完成</span>
            </span>
              <span v-if="row.state == '3'">
             <span>已超时作废</span>
            </span>
              <span v-if="row.state == '4'">
             <span>已取消</span>
            </span>
            <span v-if="row.state == '5'">
             <span>已弃号</span>
            </span>
            </template>
            <template slot-scope="{ row, index }" slot="caozuo">
              <Button type="success" v-if="row.state == '0'" style="margin-left:5px" @click="xuanhu(row)">选呼</Button>
              <Button type="error" style="margin-left:5px" v-if="row.state == '0'" @click="qihao(row)">弃号</Button>
              <Button type="success" style="margin-left:5px" v-if="row.state == '1'" @click="hanhao(row)">播报</Button>
            </template>
          </Table>
        </TabPane>
        <TabPane label="咨询业务（预约）" name="yzx" tab="tab1">
          <div style="margin-left: 10px;margin-bottom: 10px">
            <Button type="success" @click="jiaohao('yzx')">咨询业务叫号</Button>
            <Button type="success" @click="zanting('yzx')" style="margin-left:5px">办理完成并暂停</Button>
          </div>
          <Table border :columns="columns1" :data="datalist">
            <template slot-scope="{ row, index }" slot="state">
            <span v-if="row.state == '0'">
             <span>排队中</span>
            </span>
              <span v-if="row.state == '1'">
             <span>办理中</span>
            </span>
              <span v-if="row.state == '2'">
             <span>办理完成</span>
            </span>
              <span v-if="row.state == '3'">
             <span>已超时作废</span>
            </span>
              <span v-if="row.state == '4'">
             <span>已取消</span>
            </span>
            <span v-if="row.state == '5'">
             <span>已弃号</span>
            </span>
            </template>
            <template slot-scope="{ row, index }" slot="caozuo">
              <Button type="success" v-if="row.state == '0'" style="margin-left:5px" @click="xuanhu(row)">选呼</Button>
              <Button type="error" style="margin-left:5px" v-if="row.state == '0'" @click="qihao(row)">弃号</Button>
              <Button type="success" style="margin-left:5px" v-if="row.state == '1'" @click="hanhao(row)">播报</Button>
            </template>
          </Table>
        </TabPane>
        <TabPane label="办理业务（预约）" name="ybl" tab="tab1">
          <div style="margin-left: 10px;margin-bottom: 10px">
            <Button type="success" @click="jiaohao('ybl')">办理业务叫号</Button>
            <Button type="success" @click="zanting('ybl')" style="margin-left:5px">办理完成并暂停</Button>
          </div>
          <Table border :columns="columns1" :data="datalist">
            <template slot-scope="{ row, index }" slot="state">
            <span v-if="row.state == '0'">
             <span>排队中</span>
            </span>
              <span v-if="row.state == '1'">
             <span>办理中</span>
            </span>
              <span v-if="row.state == '2'">
             <span>办理完成</span>
            </span>
              <span v-if="row.state == '3'">
             <span>已超时作废</span>
            </span>
              <span v-if="row.state == '4'">
             <span>已取消</span>
            </span>
            <span v-if="row.state == '5'">
             <span>已弃号</span>
            </span>
            </template>
            <template slot-scope="{ row, index }" slot="caozuo">
              <Button type="success" v-if="row.state == '0'" style="margin-left:5px" @click="xuanhu(row)">选呼</Button>
              <Button type="error" style="margin-left:5px" v-if="row.state == '0'" @click="qihao(row)">弃号</Button>
              <Button type="success" style="margin-left:5px" v-if="row.state == '1'" @click="hanhao(row)">播报</Button>
            </template>
          </Table>
        </TabPane>
        <TabPane label="咨询业务（VIP）" name="vzx" tab="tab1">
          <div style="margin-left: 10px;margin-bottom: 10px">
            <Button type="success" @click="jiaohao('vzx')">咨询业务叫号</Button>
            <Button type="success" @click="zanting('vzx')" style="margin-left:5px">办理完成并暂停</Button>
          </div>
          <Table border :columns="columns1" :data="datalist">
            <template slot-scope="{ row, index }" slot="state">
            <span v-if="row.state == '0'">
             <span>排队中</span>
            </span>
              <span v-if="row.state == '1'">
             <span>办理中</span>
            </span>
              <span v-if="row.state == '2'">
             <span>办理完成</span>
            </span>
              <span v-if="row.state == '3'">
             <span>已超时作废</span>
            </span>
              <span v-if="row.state == '4'">
             <span>已取消</span>
            </span>
            <span v-if="row.state == '5'">
             <span>已弃号</span>
            </span>
            </template>
            <template slot-scope="{ row, index }" slot="caozuo">
              <Button type="success" v-if="row.state == '0'" style="margin-left:5px" @click="xuanhu(row)">选呼</Button>
              <Button type="error" style="margin-left:5px" v-if="row.state == '0'" @click="qihao(row)">弃号</Button>
              <Button type="success" style="margin-left:5px" v-if="row.state == '1'" @click="hanhao(row)">播报</Button>
            </template>
          </Table>
        </TabPane>
        <TabPane label="办理业务（VIP）" name="vbl" tab="tab1">
          <div style="margin-left: 10px;margin-bottom: 10px">
            <Button type="success" @click="jiaohao('vbl')">办理业务叫号</Button>
            <Button type="success" @click="zanting('vbl')" style="margin-left:5px">办理完成并暂停</Button>
          </div>
          <Table border :columns="columns1" :data="datalist">
            <template slot-scope="{ row, index }" slot="state">
            <span v-if="row.state == '0'">
             <span>排队中</span>
            </span>
              <span v-if="row.state == '1'">
             <span>办理中</span>
            </span>
              <span v-if="row.state == '2'">
             <span>办理完成</span>
            </span>
              <span v-if="row.state == '3'">
             <span>已超时作废</span>
            </span>
              <span v-if="row.state == '4'">
             <span>已取消</span>
            </span>
            <span v-if="row.state == '5'">
             <span>已弃号</span>
            </span>
            </template>
            <template slot-scope="{ row, index }" slot="caozuo">
              <Button type="success" v-if="row.state == '0'" style="margin-left:5px" @click="xuanhu(row)">选呼</Button>
              <Button type="error" style="margin-left:5px" v-if="row.state == '0'" @click="qihao(row)">弃号</Button>
              <Button type="success" style="margin-left:5px" v-if="row.state == '1'" @click="hanhao(row)">播报</Button>
            </template>
          </Table>
        </TabPane>
      </Tabs>
      <Row v-if="loadData == true">
        <Col class="demo-spin-col" span="8" offset="8">
          <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据正在加载</div>
          </Spin>
        </Col>
      </Row>
      <Page class="page_style" :total="totalnum" :current="currentPageNo"
            :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    </div>
</template>

<script>
import { auditlineup, updateNext, updateEnd, getNowLineNoByloginName, updateOne, update5, updateIsCall } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      tabIndex: 'zx',
      loadData: true,
      columns1: [
        { title: '身份证', key: 'card_no', width: '170px' },
        { title: '申请人', key: 'name' },
        { title: '手机号', key: 'mobile' },
        { title: '事项名称', key: 'item_name', width: '170px' },
        { title: '排队时间', key: 'create_time', width: '170px' },
        { title: '号序', key: 'line_no' },
        { title: '状态', slot: 'state' },
        { title: '操作', slot: 'caozuo', width: '170px' }
      ],
      datalist: [],
      totalnum: 0,
      currentPageNo: 1,
      currentPageSize: 10,
      nowlineno: ''
    }
  },
  methods: {
    tabChange () {
      this.init()
    },
    jiaohao (data) {
      let param = {}
      if (data === 'zx') {
        param = { type: 'CZ' }
      } else if (data === 'bl') {
        param = { type: 'CB' }
      } else if (data === 'yzx') {
        param = { type: 'YZ' }
      } else if (data === 'ybl') {
        param = { type: 'YB' }
      } else if (data === 'vzx') {
        param = { type: 'VZ' }
      } else if (data === 'vbl') {
        param = { type: 'VB' }
      }
      updateNext(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '叫号成功' })
          this.changePageNo()
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
        console.log(res)
      })
    },
    xuanhu (row) {
      let param = { id: row.id }
      updateOne(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '叫号成功' })
          this.changePageNo()
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
        console.log(res)
      })
    },
    qihao (row) {
      let param = { id: row.id }
      update5(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '弃号成功' })
          this.changePageNo()
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
        console.log(res)
      })
    },
    zanting (data) {
      let param = {}
      if (data === 'zx') {
        param = { type: 'CZ' }
      } else if (data === 'bl') {
        param = { type: 'CB' }
      } else if (data === 'yzx') {
        param = { type: 'YZ' }
      } else if (data === 'ybl') {
        param = { type: 'YB' }
      } else if (data === 'vzx') {
        param = { type: 'VZ' }
      } else if (data === 'vbl') {
        param = { type: 'VB' }
      }
      updateEnd(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '办理完成并暂停' })
          this.changePageNo()
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
        console.log(res)
      })
    },
    hanhao (row) {
      let param = { id: row.id }
      updateIsCall(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '播报成功' })
          this.changePageNo()
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
        console.log(res)
      })
    },
    changePageNo (pageSize) {
      console.log(pageSize)
      this.currentPageNo = pageSize
      this.init()
      this.getNowLineNoByloginName()
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    getNowLineNoByloginName () {
      getNowLineNoByloginName().then(res => {
        console.log(res.data)
        if (res.data.errcode === 0) {
          this.nowlineno = res.data.data.line_no
        } else {
          this.nowlineno = ''
        }
      })
    },
    init () {
      let type = ''
      if (this.tabIndex === 'zx') {
        type = 'CZ'
      } else if (this.tabIndex === 'bl') {
        type = 'CB'
      } else if (this.tabIndex === 'yzx') {
        type = 'YZ'
      } else if (this.tabIndex === 'ybl') {
        type = 'YB'
      } else if (this.tabIndex === 'vzx') {
        type = 'VZ'
      } else if (this.tabIndex === 'vbl') {
        type = 'VB'
      }
      let data = {
        pageNo: this.currentPageNo,
        pageSize: this.currentPageSize,
        type: type
      }
      auditlineup(data).then(res => {
        console.log(res.data)
        if (res.data.errcode === 0) {
          this.datalist = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
          this.getNowLineNoByloginName()
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .buttons{
    display: flex;
    margin-left: 10px;
  }
</style>
